<template>
	<view class="page">
		<view class="top">
			<view class="top_con">
				<view class="mesg">
					<image src="../../static/logo.png"></image>
				</view>
				<view>张三</view>
			</view>
		</view>
		<view class="body">
			<view class="body_top">
				当前健康状况
			</view>
			<view class="body_middle">
				<view class="middle_con" v-for="(item,index) in itemList" :key="item.value" :id="index"
					@click="showBadge">
					<view class="badge" v-if="item.checked==true">
						<u-icon name="checkbox-mark" color="white" size="20"></u-icon>
					</view>
					<view class="top1">

						<u-icon :name="item.heart" :color="item.color" :size="item.size"></u-icon>
					</view>
					呼吸困难
				</view>
			</view>
			<view class="btn">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				itemList: [{
						value: 1,
						heart: 'heart',
						color: '#2979ff',
						size: 50,
						label: '正常',
						checked: false,
						heart: 'heart'
					},
					{
						value: 2,
						heart: 'heart',
						color: '#2979ff',
						size: 50,
						label: '发热',
						checked: false,
						heart: 'heart'
					},
					{
						value: 3,
						heart: 'heart',
						color: '#2979ff',
						size: 50,
						label: '咳嗽',
						checked: false,
						heart: 'heart'
					},
					{
						value: 4,
						heart: 'heart',
						color: '#2979ff',
						size: 50,
						label: '乏力',
						checked: false,
						heart: 'heart'
					},
					{
						value: 5,
						heart: 'heart',
						color: '#2979ff',
						size: 50,
						label: '呼吸困难',
						checked: false,
						heart: 'heart'
					}

				]
			}
		},
		methods: {
			showBadge: function(res) {
				this.itemList[res.currentTarget.id].checked = !this.itemList[res.currentTarget.id].checked
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100%;
	}

	.badge {
		background-color: #2979ff;
		color: white;
		width: 25rpx;
		display: flex;
		position: absolute;
		z-index: 99;
		top: 30rpx;
		right: 20rpx;
		justify-content: center;
		align-items: center;
		height: 25rpx;
		border-radius: 50%;
	}

	.top {
		width: 100%;
		height: 456rpx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.top_con {
		width: 90%;
		height: 340rpx;
		border-radius: 6rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		box-shadow: 0rpx 5rpx 5rpx 5rpx #F3F4F6,
			5rpx 0rpx 5rpx 5rpx #F3F4F6,
			0rpx -5rpx 5rpx 5rpx #F3F4F6,
			-5rpx 0rpx 5rpx 5rpx #F3F4F6;
	}

	.mesg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;

		}

		margin-bottom: 10rpx;
	}

	.body {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.body_top {
		width: 90%;
		height: 100rpx;
		font-size: 45rpx;
		font-weight: middle;

	}

	.body_middle {
		width: 90%;
		height: 200rpx;
		display: flex;

	}

	.middle_con {
		position: relative;
		width: 20%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.top1 {
		width: 100rpx;
		height: 100rpx;
		position: relative;
		background: #ECF5FF;
		border-radius: 50%;
		margin-bottom: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.btn {
		width: 90%;
		height: 90rpx;
		background: #2979FF;
		margin-top: 70rpx;
		border-radius: 7rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: white;
		font-size: 30rpx;
		justify-content: center;
	}
</style>
